<template>
  <!-- 编辑评语 -->
  <el-dialog
    title="新增联合考试机构"
    class="gl_dialog_TitleLine gl_dl_footer card"
    :visible.sync="dialogEditVisible"
    :close-on-click-modal="false"
    width="1024px"
    top="25vh"
  >
    <div class="nav">
      <el-input v-model="Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.Filter" class="check" placeholder="请输入联合考试机构的名称" clearable prefix-icon="el-icon-search" @change="gettablelist()" />
    </div>
    <div style="margin-top:15px">
      <el-table ref="multipleTable" v-loading="tableLoading" size="mini" class="gl_table_noBorder" :row-key="(row)=>{return row.id}" :data="tablelist" @selection-change="selection">
        <el-table-column type="selection" label-class-name="selection" :reserve-selection="true" />
        <el-table-column label="道馆名称" prop="delegation.name" />
        <el-table-column label="所在地区">
          <template slot-scope="{row}">
            {{ addressDataForCheck(row.provinceCode, row.cityCode, row.countyCode) }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" prop="delegation.contactPerson" />
        <el-table-column label="联系方式" prop="delegation.phoneNumber" />
      </el-table>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.Page"
        :page-size="Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <!-- 取消按钮 -->
      <el-button size="mini" @click="dialogEditVisible = false">{{ $t('button.cancel') }}</el-button>
      <!-- 编辑的保存按钮 -->
      <el-button size="mini" type="primary" :loading="addfalse" @click="addOrgain()">发送请求</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_ClubDuanExamRequestDuanExamOrganizationUnits, api_POST_ClubDuanExamParticipatingUnit } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO, CreateDuanExamParticipatingUnitInput } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      orgainId: [],
      tablelist: [],
      Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO: new Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO(),
      CreateDuanExamParticipatingUnitInput: new CreateDuanExamParticipatingUnitInput(),
      dialogEditVisible: false,
      tableLoading: false,
      addfalse: false,
      totalPage: 0
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  watch: {
    dialogEditVisible: {
      handler() {
        if (this.dialogEditVisible === false) {
          this.CreateDuanExamParticipatingUnitInput = new CreateDuanExamParticipatingUnitInput();
          this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO = new Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO();
          this.orgainId = [];
          this.$refs.multipleTable.clearSelection();
        }
      }
    }
  },

  created() {
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取列表
    gettablelist(page) {
      this.tableLoading = true;
      this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.Page = page || 1;
      this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.SkipCount = (this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.Page - 1) * this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.MaxResultCount;
      api_GET_ClubDuanExamRequestDuanExamOrganizationUnits(this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO).then(res => {
        this.tablelist = res.items;
        this.tableLoading = false;
        this.totalPage = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    selection(val) {
      this.orgainId = [];
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else {
        if (val.length !== 0) {
          this.orgainId = val[0].id;
        }
      }
    },
    // 分页按钮
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    // 处理省市区
    addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData} ${_cityData} ${_countyData}`;
    },
    addOrgain() {
      if (this.orgainId.length === 0) {
        this.$message({ type: 'warning', message: '请选择机构' });
        return;
      }
      this.addfalse = true;
      this.CreateDuanExamParticipatingUnitInput.duanExamId = this.$route.query.id;
      this.CreateDuanExamParticipatingUnitInput.participatingUnitId = this.orgainId;
      console.log(this.CreateDuanExamParticipatingUnitInput, this.orgainId);
      api_POST_ClubDuanExamParticipatingUnit(this.CreateDuanExamParticipatingUnitInput).then(res => {
        this.addfalse = false;
        this.$message({ type: 'success', message: '邀请成功' });
        this.dialogEditVisible = false;
        this.$parent.gettablelist();
      }, error => {
        this.addfalse = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>

<style scoped>
.nav{
  display: flex;
  justify-content: center;
}
.check{
  margin-top:14px;
  margin-bottom:16px;
  overflow:hidden;
  width: 90%;
  margin: 0 auto;
}
 .check .el-input__inner {
  border-radius: 20px;
}
</style>
